<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue';

import {
  Button,
  Card,
  Col,
  Descriptions,
  DescriptionsItem,
  Form,
  FormItem,
  Input,
  message,
  Modal,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  TabPane,
  Tabs,
  Tag,
  Tree,
  TreeSelect,
  Divider,
  Badge,
  Tooltip,
  Popconfirm,
  Drawer,
  List,
  Avatar,
  Progress,
  Statistic,
  Dropdown,
  Menu,
} from 'ant-design-vue';

import { IconifyIcon } from '@vben/icons';
import { getTechnicalResources } from '#/api/resource-center';

const loading = ref(false);
const resourceList = ref<any[]>([]);
const total = ref(0);

const searchForm = reactive({
  keyword: '',
  technicalType: '',
  status: '',
  businessType: '',
});

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 支持无限层级的表格列配置
const columns = [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    key: 'serialNumber',
    width: 120,
    customRender: ({ record }: any) => {
      return h('span', { class: 'serial-number' }, record.serialNumber);
    },
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
    customRender: ({ record }: any) => {
      return h('div', { class: 'resource-name' }, [
        h(IconifyIcon, {
          icon: getResourceIcon(record.technicalType),
          class: 'resource-icon',
        }),
        h('span', { class: 'name-text' }, record.name),
      ]);
    },
  },
  {
    title: '类别',
    dataIndex: 'technicalType',
    key: 'technicalType',
    width: 120,
    customRender: ({ record }: any) => {
      return h(
        Tag,
        { color: getTechnicalTypeColor(record.technicalType) },
        () => getTechnicalTypeText(record.technicalType),
      );
    },
  },
  {
    title: '发布状态',
    dataIndex: 'publishStatus',
    key: 'publishStatus',
    width: 100,
    customRender: ({ record }: any) => {
      return h(Tag, { color: 'green' }, () => '正常');
    },
  },
  {
    title: '运行状态',
    dataIndex: 'runningStatus',
    key: 'runningStatus',
    width: 100,
    customRender: ({ record }: any) => {
      return h(Tag, { color: 'red' }, () => '已修改');
    },
  },
  {
    title: '版本',
    dataIndex: 'version',
    key: 'version',
    width: 100,
    customRender: ({ record }: any) => {
      return h(Tag, { color: 'blue' }, () => record.version);
    },
  },
  {
    title: '作者',
    dataIndex: 'author',
    key: 'author',
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    width: 300,
    fixed: 'right' as const,
    customRender: ({ record }: any) => {
      const menuItems = [
        {
          key: 'edit',
          label: '编辑',
          icon: h(IconifyIcon, { icon: 'mdi:pencil' }),
          onClick: () => openResourceForm('edit', record),
        },
        {
          key: 'copy',
          label: '复制',
          icon: h(IconifyIcon, { icon: 'mdi:content-copy' }),
          onClick: () => copyResource(record),
        },
        {
          key: 'addSub',
          label: '新增子项',
          icon: h(IconifyIcon, { icon: 'mdi:plus' }),
          onClick: () => addSubResource(record),
        },
        {
          key: 'preview',
          label: '预览',
          icon: h(IconifyIcon, { icon: 'mdi:eye' }),
          onClick: () => previewResourceRecord(record),
        },
        {
          key: 'design',
          label: '设计',
          icon: h(IconifyIcon, { icon: 'mdi:pencil-box' }),
          onClick: () => designResource(record),
        },
        {
          key: 'publish',
          label: '发布',
          icon: h(IconifyIcon, { icon: 'mdi:publish' }),
          onClick: () => publishResource(record),
        },
        {
          key: 'authorize',
          label: '授权',
          icon: h(IconifyIcon, { icon: 'mdi:shield-check' }),
          onClick: () => authorizeResource(record),
        },
        {
          key: 'record',
          label: '记录',
          icon: h(IconifyIcon, { icon: 'mdi:clipboard-text' }),
          onClick: () => viewRecord(record),
        },
        {
          key: 'data',
          label: '数据',
          icon: h(IconifyIcon, { icon: 'mdi:database' }),
          onClick: () => viewData(record),
        },
        {
          key: 'delete',
          label: '删除',
          icon: h(IconifyIcon, { icon: 'mdi:delete' }),
          danger: true,
          onClick: () => deleteResource(record),
        },
      ];

      return h('div', { class: 'action-buttons' }, [
        h(
          Button,
          {
            type: 'link',
            size: 'small',
            onClick: () => openResourceForm('edit', record),
          },
          () => '编辑',
        ),
        h(
          Button,
          {
            type: 'link',
            size: 'small',
            onClick: () => addSubResource(record),
          },
          () => '新增子项',
        ),
        h(
          Dropdown,
          {
            overlay: h(Menu, { items: menuItems }),
            trigger: ['click'],
          },
          {
            default: () =>
              h(
                Button,
                {
                  type: 'link',
                  size: 'small',
                },
                () => '更多',
              ),
          },
        ),
      ]);
    },
  },
];

// 表单相关
const formVisible = ref(false);
const formTitle = ref('新增技术资源');
const formRef = ref();
const parentResource = ref<any>(null);
const formData = reactive({
  id: '',
  name: '',
  code: '',
  technicalType: '',
  status: 'ACTIVE',
  version: '1.0.0',
  author: '',
  description: '',
  config: '',
  parentId: '',
  level: 1,
  serialNumber: '',
  dependencies: [],
  businessTypes: [],
  tags: [],
});

const formRules = {
  name: [{ required: true, message: '请输入资源名称' }],
  code: [{ required: true, message: '请输入资源编码' }],
  technicalType: [{ required: true, message: '请选择技术类型' }],
  status: [{ required: true, message: '请选择状态' }],
  version: [{ required: true, message: '请输入版本号' }],
  author: [{ required: true, message: '请输入作者' }],
};

// 详情相关
const detailVisible = ref(false);
const selectedResource = ref<any>({});

// 预览相关
const previewVisible = ref(false);
const previewTab = ref('config');
const previewResource = ref<any>({});

// 加载数据
const loadData = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.current,
      pageSize: pagination.pageSize,
      keyword: searchForm.keyword,
      technicalType: searchForm.technicalType,
      status: searchForm.status,
      businessType: searchForm.businessType,
    };

    const response = await getTechnicalResources(params);
    // 模拟层级数据
    resourceList.value = generateHierarchicalData(response.items || []);
    total.value = response.total || 0;
    pagination.total = total.value;
  } catch (error) {
    console.warn('加载技术资源失败:', error);
    message.error('加载数据失败');
  } finally {
    loading.value = false;
  }
};

// 生成层级数据
const generateHierarchicalData = (items: any[]) => {
  const hierarchicalItems = [
    {
      id: '1',
      name: '技术资源库',
      code: 'TECH_ROOT',
      technicalType: 'ROOT',
      status: 'ACTIVE',
      version: '1.0.0',
      author: '系统管理员',
      description: '技术资源根目录',
      serialNumber: '1',
      level: 1,
      children: [
        {
          id: '1.1',
          name: '表单模板库',
          code: 'FORM_LIB',
          technicalType: 'FORM_TEMPLATE',
          status: 'ACTIVE',
          version: '1.0.0',
          author: '张三',
          description: '表单模板集合',
          serialNumber: '1.1',
          level: 2,
          children: [
            {
              id: '1.1.1',
              name: '用户注册表单',
              code: 'USER_REGISTER_FORM',
              technicalType: 'FORM_TEMPLATE',
              status: 'ACTIVE',
              version: '1.0.0',
              author: '李四',
              description: '用户注册表单模板',
              serialNumber: '1.1.1',
              level: 3,
            },
            {
              id: '1.1.2',
              name: '订单提交表单',
              code: 'ORDER_SUBMIT_FORM',
              technicalType: 'FORM_TEMPLATE',
              status: 'ACTIVE',
              version: '1.0.0',
              author: '王五',
              description: '订单提交表单模板',
              serialNumber: '1.1.2',
              level: 3,
            },
          ],
        },
        {
          id: '1.2',
          name: '报表模板库',
          code: 'REPORT_LIB',
          technicalType: 'REPORT_TEMPLATE',
          status: 'ACTIVE',
          version: '1.0.0',
          author: '赵六',
          description: '报表模板集合',
          serialNumber: '1.2',
          level: 2,
          children: [
            {
              id: '1.2.1',
              name: '销售报表',
              code: 'SALES_REPORT',
              technicalType: 'REPORT_TEMPLATE',
              status: 'ACTIVE',
              version: '1.0.0',
              author: '钱七',
              description: '销售数据报表模板',
              serialNumber: '1.2.1',
              level: 3,
            },
          ],
        },
        {
          id: '1.3',
          name: '流程节点库',
          code: 'WORKFLOW_LIB',
          technicalType: 'WORKFLOW_NODE',
          status: 'ACTIVE',
          version: '1.0.0',
          author: '孙八',
          description: '工作流节点集合',
          serialNumber: '1.3',
          level: 2,
        },
        {
          id: '1.4',
          name: '接口模板库',
          code: 'API_LIB',
          technicalType: 'API_TEMPLATE',
          status: 'ACTIVE',
          version: '1.0.0',
          author: '周九',
          description: 'API接口模板集合',
          serialNumber: '1.4',
          level: 2,
        },
      ],
    },
  ];

  return hierarchicalItems;
};

// 搜索
const handleSearch = () => {
  pagination.current = 1;
  loadData();
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    keyword: '',
    technicalType: '',
    status: '',
    businessType: '',
  });
  handleSearch();
};

// 表格变化
const handleTableChange = (pag: any) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  loadData();
};

// 打开表单
const openResourceForm = (type: 'create' | 'edit', record?: any) => {
  formTitle.value = type === 'create' ? '新增技术资源' : '编辑技术资源';typetype
  formVisible.value = true;

  if (type === 'edit' && record) {
    Object.assign(formData, record);
  } else {
    Object.assign(formData, {
      id: '',
      name: '',
      code: '',
      technicalType: '',
      status: 'ACTIVE',
      version: '1.0.0',
      author: '',
      description: '',
      config: '',
      parentId: '',
      level: 1,
      serialNumber: '',
      dependencies: [],
      businessTypes: [],
      tags: [],
    });
  }
};

// 新增子项
const addSubResource = (parentRecord: any) => {
  parentResource.value = parentRecord;
  formTitle.value = '新增子项';
  formVisible.value = true;

  // 设置父级信息
  formData.parentId = parentRecord.id;
  formData.level = parentRecord.level + 1;
  formData.serialNumber = generateSerialNumber(parentRecord);

  // 重置其他字段
  Object.assign(formData, {
    id: '',
    name: '',
    code: '',
    technicalType: parentRecord.technicalType, // 继承父级类型
    status: 'ACTIVE',
    version: '1.0.0',
    author: '',
    description: '',
    config: '',
    dependencies: [],
    businessTypes: [],
    tags: [],
  });
};

// 生成序号
const generateSerialNumber = (parentRecord: any) => {
  const parentSerial = parentRecord.serialNumber;
  const children = parentRecord.children || [];
  const nextNumber = children.length + 1;
  return `${parentSerial}.${nextNumber}`;
};

// 复制资源
const copyResource = (record: any) => {
  formTitle.value = '复制技术资源';
  formVisible.value = true;

  // 复制原记录数据，但清空ID和序号
  Object.assign(formData, {
    ...record,
    id: '',
    name: `${record.name}_副本`,
    code: `${record.code}_COPY`,
    serialNumber: generateSerialNumber(record),
  });
};

// 提交表单
const handleFormSubmit = async () => {
  try {
    await formRef.value.validate();
    // TODO: 调用API保存数据
    message.success(formData.id ? '更新成功' : '创建成功');TODOTODO
    formVisible.value = false;
    loadData();
  } catch (error) {
    console.warn('表单验证失败:', error);
  }
};

// 取消表单
const handleFormCancel = () => {
  formVisible.value = false;
  formRef.value?.resetFields();
  parentResource.value = null;
};

// 查看详情
const viewResource = (record: any) => {
  selectedResource.value = record;
  detailVisible.value = true;
};

// 预览资源
const previewResourceRecord = (record: any) => {
  previewResource.value = record;
  previewVisible.value = true;
  previewTab.value = 'config';
};

// 设计资源
const designResource = (record: any) => {
  message.info(`设计资源: ${record.name}`);
  // TODO: 打开设计器TODOTODO
};

// 发布资源
const publishResource = (record: any) => {
  Modal.confirm({
    title: '确认发布',
    content: `确定要发布资源"${record.name}"吗？`,
    onOk: async () => {
      try {
        // TODO: 调用API发布资源
        message.success('发布成功');
        loadData();
      } catch (error) {
        console.warn('发布失败:', error);
        message.error('发布失败');
      }
    },
  });
};

// 授权资源
const authorizeResource = (record: any) => {
  message.info(`授权资源: ${record.name}`);
  // TODO: 打开授权管理TODOTODO
};

// 查看记录
const viewRecord = (record: any) => {
  message.info(`查看记录: ${record.name}`);
  // TODO: 打开记录查看TODOTODO
};

// 查看数据
const viewData = (record: any) => {
  message.info(`查看数据: ${record.name}`);
  // TODO: 打开数据查看TODOTODO
};

// 删除资源
const deleteResource = (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除技术资源"${record.name}"吗？${record.children?.length ? '删除后将同时删除所有子项！' : ''}`,
    onOk: async () => {
      try {
        // TODO: 调用API删除数据
        message.success('删除成功');
        loadData();
      } catch (error) {
        console.warn('删除失败:', error);
        message.error('删除失败');
      }
    },
  });
};

// 工具函数
const getResourceIcon = (type: string) => {
  const icons: Record<string, string> = {
    ROOT: 'mdi:folder-multiple',
    FORM_TEMPLATE: 'mdi:file-document-outline',
    REPORT_TEMPLATE: 'mdi:chart-line',
    WORKFLOW_NODE: 'mdi:flow-parallel',
    API_TEMPLATE: 'mdi:api',
  };
  return icons[type] || 'mdi:file';
};

const getTechnicalTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    ROOT: 'default',
    FORM_TEMPLATE: 'blue',
    REPORT_TEMPLATE: 'green',
    WORKFLOW_NODE: 'orange',
    API_TEMPLATE: 'purple',
  };
  return colors[type] || 'default';
};

const getTechnicalTypeText = (type: string) => {
  const texts: Record<string, string> = {
    ROOT: '根目录',
    FORM_TEMPLATE: '表单模板',
    REPORT_TEMPLATE: '报表模板',
    WORKFLOW_NODE: '流程节点',
    API_TEMPLATE: '接口模板',
  };
  return texts[type] || type;
};

const getStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    ACTIVE: 'green',
    INACTIVE: 'red',
    DRAFT: 'orange',
  };
  return colors[status] || 'default';
};

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    ACTIVE: '激活',
    INACTIVE: '非激活',
    DRAFT: '草稿',
  };
  return texts[status] || status;
};

onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="technical-resource-catalog">
    <div class="catalog-header">
      <Row :gutter="16">
        <Col :span="8">
          <Input
            v-model:value="searchForm.keyword"
            placeholder="搜索技术资源名称、编码"
            allow-clear
            @change="handleSearch"
          />
        </Col>
        <Col :span="4">
          <Select
            v-model:value="searchForm.technicalType"
            placeholder="技术类型"
            allow-clear
            @change="handleSearch"
          >
            <SelectOption value="FORM_TEMPLATE">表单模板</SelectOption>
            <SelectOption value="REPORT_TEMPLATE">报表模板</SelectOption>
            <SelectOption value="WORKFLOW_NODE">流程节点</SelectOption>
            <SelectOption value="API_TEMPLATE">接口模板</SelectOption>
          </Select>
        </Col>
        <Col :span="4">
          <Select
            v-model:value="searchForm.status"
            placeholder="状态"
            allow-clear
            @change="handleSearch"
          >
            <SelectOption value="ACTIVE">激活</SelectOption>
            <SelectOption value="INACTIVE">非激活</SelectOption>
            <SelectOption value="DRAFT">草稿</SelectOption>
          </Select>
        </Col>
        <Col :span="8">
          <Space>
            <Button type="primary" @click="handleSearch">搜索</Button>
            <Button @click="handleReset">重置</Button>
            <Button type="primary" @click="openResourceForm('create')">
              新增技术资源
            </Button>
          </Space>
        </Col>
      </Row>
    </div>

    <div class="catalog-content">
      <Card title="技术资源目录" :bordered="false">
        <Table
          :columns="columns"
          :data-source="resourceList"
          :loading="loading"
          :pagination="pagination"
          row-key="id"
          :expandable="{
            defaultExpandAllRows: true,
            expandRowByClick: true,
          }"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'serialNumber'">
              <span class="serial-number">{{ record.serialNumber }}</span>
            </template>
            <template v-else-if="column.key === 'name'">
              <div class="resource-name">
                <IconifyIcon
                  :icon="getResourceIcon(record.technicalType)"
                  class="resource-icon"
                />
                <span class="name-text">{{ record.name }}</span>
              </div>
            </template>
            <template v-else-if="column.key === 'technicalType'">
              <Tag :color="getTechnicalTypeColor(record.technicalType)">
                {{ getTechnicalTypeText(record.technicalType) }}
              </Tag>
            </template>
            <template v-else-if="column.key === 'publishStatus'">
              <Tag color="green">正常</Tag>
            </template>
            <template v-else-if="column.key === 'runningStatus'">
              <Tag color="red">已修改</Tag>
            </template>
            <template v-else-if="column.key === 'version'">
              <Tag color="blue">{{ record.version }}</Tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <div class="action-buttons">
                <Button
                  type="link"
                  size="small"
                  @click="openResourceForm('edit', record)"
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  @click="addSubResource(record)"
                >
                  新增子项
                </Button>
                <Dropdown :trigger="['click']">
                  <Button type="link" size="small">
                    更多
                    <IconifyIcon icon="mdi:chevron-down" />
                  </Button>
                  <template #overlay>
                    <Menu>
                      <Menu.Item key="copy" @click="copyResource(record)">
                        <IconifyIcon icon="mdi:content-copy" />
                        复制
                      </Menu.Item>
                      <Menu.Item
                        key="preview"
                        @click="previewResourceRecord(record)"
                      >
                        <IconifyIcon icon="mdi:eye" />
                        预览
                      </Menu.Item>
                      <Menu.Item key="design" @click="designResource(record)">
                        <IconifyIcon icon="mdi:pencil-box" />
                        设计
                      </Menu.Item>
                      <Menu.Item key="publish" @click="publishResource(record)">
                        <IconifyIcon icon="mdi:publish" />
                        发布
                      </Menu.Item>
                      <Menu.Item
                        key="authorize"
                        @click="authorizeResource(record)"
                      >
                        <IconifyIcon icon="mdi:shield-check" />
                        授权
                      </Menu.Item>
                      <Menu.Item key="record" @click="viewRecord(record)">
                        <IconifyIcon icon="mdi:clipboard-text" />
                        记录
                      </Menu.Item>
                      <Menu.Item key="data" @click="viewData(record)">
                        <IconifyIcon icon="mdi:database" />
                        数据
                      </Menu.Item>
                      <Menu.Divider />
                      <Menu.Item
                        key="delete"
                        danger
                        @click="deleteResource(record)"
                      >
                        <IconifyIcon icon="mdi:delete" />
                        删除
                      </Menu.Item>
                    </Menu>
                  </template>
                </Dropdown>
              </div>
            </template>
          </template>
        </Table>
      </Card>
    </div>

    <!-- 资源表单弹窗 -->
    <Modal
      v-model:open="formVisible"
      :title="formTitle"
      width="800px"
      @ok="handleFormSubmit"
      @cancel="handleFormCancel"
    >
      <Form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical"
      >
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="资源名称" name="name">
              <Input
                v-model:value="formData.name"
                placeholder="请输入资源名称"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="资源编码" name="code">
              <Input
                v-model:value="formData.code"
                placeholder="请输入资源编码"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="技术类型" name="technicalType">
              <Select
                v-model:value="formData.technicalType"
                placeholder="请选择技术类型"
              >
                <SelectOption value="FORM_TEMPLATE">表单模板</SelectOption>
                <SelectOption value="REPORT_TEMPLATE">报表模板</SelectOption>
                <SelectOption value="WORKFLOW_NODE">流程节点</SelectOption>
                <SelectOption value="API_TEMPLATE">接口模板</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="状态" name="status">
              <Select v-model:value="formData.status" placeholder="请选择状态">
                <SelectOption value="ACTIVE">激活</SelectOption>
                <SelectOption value="INACTIVE">非激活</SelectOption>
                <SelectOption value="DRAFT">草稿</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="版本" name="version">
              <Input
                v-model:value="formData.version"
                placeholder="请输入版本号"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="作者" name="author">
              <Input v-model:value="formData.author" placeholder="请输入作者" />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="描述" name="description">
          <Input.TextArea
            v-model:value="formData.description"
            :rows="3"
            placeholder="请输入资源描述"
          />
        </FormItem>
        <FormItem label="配置内容" name="config">
          <Input.TextArea
            v-model:value="formData.config"
            :rows="6"
            placeholder="请输入配置内容（JSON格式）"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 资源详情弹窗 -->
    <Modal
      v-model:open="detailVisible"
      title="技术资源详情"
      width="700px"
      :footer="null"
    >
      <Descriptions :column="2" bordered>
        <DescriptionsItem label="资源名称">
          {{ selectedResource.name }}
        </DescriptionsItem>
        <DescriptionsItem label="资源编码">
          {{ selectedResource.code }}
        </DescriptionsItem>
        <DescriptionsItem label="技术类型">
          <Tag :color="getTechnicalTypeColor(selectedResource.technicalType)">
            {{ getTechnicalTypeText(selectedResource.technicalType) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="状态">
          <Tag :color="getStatusColor(selectedResource.status)">
            {{ getStatusText(selectedResource.status) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="版本">
          <Tag color="blue">{{ selectedResource.version }}</Tag>
        </DescriptionsItem>
        <DescriptionsItem label="作者">
          {{ selectedResource.author }}
        </DescriptionsItem>
        <DescriptionsItem label="描述" :span="2">
          {{ selectedResource.description }}
        </DescriptionsItem>
        <DescriptionsItem label="创建时间">
          {{ selectedResource.createTime }}
        </DescriptionsItem>
        <DescriptionsItem label="更新时间">
          {{ selectedResource.updateTime }}
        </DescriptionsItem>
      </Descriptions>
    </Modal>

    <!-- 预览弹窗 -->
    <Modal
      v-model:open="previewVisible"
      title="资源预览"
      width="900px"
      :footer="null"
    >
      <div class="preview-content">
        <Tabs v-model:active-key="previewTab">
          <TabPane key="config" tab="配置预览">
            <pre>{{ previewResource.config }}</pre>
          </TabPane>
          <TabPane key="usage" tab="使用说明">
            <div class="usage-content">
              <h4>使用说明</h4>
              <p>
                这是一个{{
                  getTechnicalTypeText(previewResource.technicalType)
                }}，可以用于以下场景：
              </p>
              <ul>
                <li>
                  快速创建标准化的{{
                    getTechnicalTypeText(previewResource.technicalType)
                  }}
                </li>
                <li>提高开发效率，减少重复工作</li>
                <li>保证资源的一致性和规范性</li>
              </ul>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
  </div>
</template>

<style scoped>
.technical-resource-catalog {
  padding: 20px;
}

.catalog-header {
  padding: 20px;
  margin-bottom: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.catalog-content {
  margin-bottom: 24px;
}

.preview-content {
  max-height: 500px;
  overflow-y: auto;
}

.preview-content pre {
  padding: 16px;
  font-size: 12px;
  line-height: 1.5;
  background: #f5f5f5;
  border-radius: 4px;
}

.usage-content h4 {
  margin-bottom: 16px;
  color: #1890ff;
}

.usage-content ul {
  padding-left: 20px;
}

.usage-content li {
  margin-bottom: 8px;
}

.serial-number {
  font-weight: 500;
  color: #1890ff;
}

.resource-name {
  display: flex;
  gap: 8px;
  align-items: center;
}

.resource-icon {
  font-size: 16px;
  color: #666;
}

.name-text {
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}

.action-buttons .ant-btn-link {
  height: auto;
  padding: 0 4px;
  line-height: 1;
}

/* 层级缩进样式 */
.ant-table-tbody > tr > td {
  padding-left: 16px;
}

.ant-table-tbody > tr[data-row-key='1'] > td:first-child {
  padding-left: 16px;
}

.ant-table-tbody > tr[data-row-key='1.1'] > td:first-child {
  padding-left: 32px;
}

.ant-table-tbody > tr[data-row-key='1.1.1'] > td:first-child {
  padding-left: 48px;
}

.ant-table-tbody > tr[data-row-key='1.1.2'] > td:first-child {
  padding-left: 48px;
}

.ant-table-tbody > tr[data-row-key='1.2'] > td:first-child {
  padding-left: 32px;
}

.ant-table-tbody > tr[data-row-key='1.2.1'] > td:first-child {
  padding-left: 48px;
}

.ant-table-tbody > tr[data-row-key='1.3'] > td:first-child {
  padding-left: 32px;
}

.ant-table-tbody > tr[data-row-key='1.4'] > td:first-child {
  padding-left: 32px;
}
</style>
